<template>
  <div class="diff_container">
    <v-card>
      <v-card-title>
        Diff
        <v-spacer></v-spacer>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
      </v-card-title>
      <v-data-table :headers="headers" :items="list" :search="search">
        <template v-slot:item.options="{ item }">
          <v-btn text color="primary" @click="detail(item.diffId)"> Detail </v-btn>
        </template>
      </v-data-table>
    </v-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",
      headers: [
        { text: "学号", value: "studentNum" },
        { text: "姓名", value: "studentName" },
        { text: "题目", value: "exerciseTitle" },
        { text: "平均相似度", value: "avgSimilarity" },
        { text: "修改次数", value: "modifyTimes" },
        { text: "操作", value: "options" },
      ],
      list: [],
    };
  },
  methods: {
    getList() {
      this.$axios.get("/diff/list").then((response) => {
        let res = response.data;
        if (res.code == 200) {
          this.list = res.data;
        }
      });
    },
    detail(diffId) {
      this.$router.push({path: '/diff/timeline?diff_id='+diffId});
    },
    init() {
      this.getList();
    },
  },
  mounted() {
    this.init();
  },
};
</script>